<template>
  <div>
    <div style='width:100%;height:100%' v-bind:id='id'></div>
    <span>{{ testdata2.name }}</span>
  </div>
</template>

<script>
  import Echarts from 'echarts';
  var echart1 = null;
  export default {
    name: 'test',
    data () {
      return {
        d1: Number(1 === true),
        testdata2: { name: 'haha' }
      };
    },
    props: ['id', 'tdata'],
    methods: {
      getOption (d) {
        const option = {
          color: ['#00e9dd', '#3a85ff'],
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'cross',
              crossStyle: {
                color: '#999'
              }
            }
          },
          toolbox: {
            feature: {
              // dataView: {show: true, readOnly: false},
              magicType: {show: true, type: ['line', 'bar']},
              restore: {show: true},
              saveAsImage: {show: true}
            },
            right: 220
          },
          legend: {
            data: ['充电次数','充电电量']
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '1%',
            top: 30,
            containLabel: true
          },
          xAxis: [
            {
              type: 'category',
              data: d[0],
              axisPointer: {
                type: 'shadow'
              }
            }
          ],
          yAxis: [
            {
              type: 'value',
              name: d[2],
              axisLabel: {
                formatter: '{value}'
              },
              interval: 1
            },

            {
              type: 'value',
              name: d[6],
              min: 0,
              boundaryGap: [0, '100%'],
              // interval: 5,
              axisLine: {show: false},
              splitLine: {
                show: false
              },
              axisLabel: {
                formatter: '{value} kwh'
              }
            }
          ],
          series: [
            {
              name: d[3],
              yAxisIndex: 0,
              type: 'line',
              smooth: true,
              barWidth: '30%',
              data: d[1]
            },
            {
              name: d[7],
              yAxisIndex: 1,
              type: 'bar',
              smooth: true,
              barWidth: '30%',
              data: d[5]
            }
          ]
        };
        return option;
      }
    },
    mounted () {
      this.testdata2.name = '';
      echart1 = Echarts.init(document.getElementById(this.id));
    },
    beforeUpdate () {
      var option = this.getOption(this.tdata);
      if (option) {
        echart1.setOption(option, true);
      }
    },
    watch: {
      tdata: function (d) {
        var option = this.getOption(d);
        echart1.setOption(option, true);
      }
    },
    computed: {
      comp1 () {
        return `${this.d1}`;
      }
    }
  };
</script>
